<template>
    <div style="text-align: center;padding:20px 0">
        <div style="display: inline-flex;">
            <div v-for="(item,index) in nodes" class="item">
                <div class="item-arrow" v-if="nodes.length>0&&index!=0">
                    <img src="@assets/right_arrow.svg">
                </div>
                <div class="item-content">
                    <div class="item-node">{{item.nodeName}}</div>
                    <div v-for="(childItem,childIndex) in item.children">
                        <div v-if="item.children.length>1&&childIndex!=0">{{item.opType=='0'?'或':'且'}}</div>
                        <div class="child-item">{{childItem.nodeName}}</div>
                    </div>
                </div>
                <div v-if="item.backNodeId" class="item-back" :style="{left:`${item.offset}px`}">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    //流程图
    export default {
        name: "FlowChart",
        props: ['nodes'],
        watch: {
            nodes: {
                immediate: true,
                handler: function () {
                    this.calculateOffset()
                }
            }
        },
        methods: {
            //计算节点驳回的偏移量
            calculateOffset() {
                this.nodes.forEach((item, index) => {
                    if (item.backNodeId) {
                        const targetIndex = this.nodes.findIndex(ele => ele.nodeId == item.backNodeId);
                        if (targetIndex != -1) {
                            item.offset = (index - targetIndex - 1) * (-175) - 50;
                        }
                    }
                })
            }
        }
    }
</script>

<style scoped lang="less">

    .item {
        display: flex;
        justify-items: stretch;
        position: relative;
    }

    .item-content {
        width: 90px;
        border: 2px solid #eee;
        border-radius: 8px;
        padding: 10px;
        text-align: center;
        background-color: white;
        box-shadow: 2px 3px 5px 3px #ededed
    }

    .item-node {
        font-weight: 700;
        font-size: 16px;
        margin-bottom: 10px;
    }

    .item-arrow {
        width: 80px;
        align-self: center;

        img {
            width: 100%;
        }
    }

    .item-back {
        position: absolute;
        bottom: -50px;
        right: 45px;
        left: -230px;
        height: 40px;
        border: 30px solid transparent;
        border-image: url("~@assets/back_arrow.png") 32 30 28 30 round repeat;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .child-item {
        padding: 5px;
        text-align: center;
        background-color: #1bcdef;
        border-radius: 6px;
        font-size: 13px;
        color: white;
    }

</style>